<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>28-css过渡+动画-none</title>
		<link rel="stylesheet" href="../css/node-public.css">
	</head>
	<body>
		
		<div id="box">
			<h1>28-css过渡+动画-none</h1>
			<a href="../confused is Blog/confused is Blog.html">首页</a>
		</div>
		<div id="main-box">
			<ul>
				<li>
					<h2>过渡</h2>
					<span>从一种样式到另一种样式之间的变化能被看见
		transition-property:  过渡的属性名称
		transition-duration    过渡时间
			s  秒数
		transition-timing-function	过渡曲线
			ease   开始慢-中间快-结尾慢
			ease-out   慢速结束
			linear     匀速
			ease-in     规定以慢速开始的过渡效果
			ease-in-out   规定以慢速开始和结束的过渡效果
		transition-delay   延迟,例如：transition-delay : 2s;

		过渡所有能过渡的属性
		不能过渡的：display 

		复合：名称 时间 速度 延迟；
		</span>
				</li>
				<li>
					<h2>动画</h2>
					<span>@keyframe   动画帧，用来播放动画
		animation-timing-function   动画的速度曲线
			ease   开始慢-中间快-结尾慢
			ease-out   慢速结束
			linear     匀速
			ease-in     规定以慢速开始的过渡效果
			ease-in-out   规定以慢速开始和结束的过渡效果
		
		animation-delay    延迟时间
		animation-iteration-count   动画的播放次数
			数字 ，默认 1次
			infinite  循环

		animation-direction   设置动画的执行方向
			noraml  默认值
			reverse   反向
			alternate  奇数正偶数反
			alternate-reverse  奇数反偶数正
		
		animation-fill-mode   
			none  默认值，播放完会返回原始状态
			forwards   原始状态 ---- 0%--(动画播放过程)---100%，播放完				会停在 100%
			backwards   忽略原始状态.0%--(动画播放过程)---100%  -----				原始状态
			both     忽略原始状态，动画结束后停在100%。
						0%--(动画播放过程)---100%
		
		animation:	name  时间 次数 延迟时间 ······;
		</span>
				</li>
			</ul>
	</body>
</html>
